<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>JS原形链图解</title>
</head>
<body>
    <script type="text/javascript">
    function SuperType(){
        this.property = "我是父亲的属性";
    }
    SuperType.prototype.getSuperValue = function(){
        return this.property;
    }
    function SubType(){
        this.subproperty = "我是孩子的属性";
    }
    var SubPro = SubType.prototype;//因为下面要改变原型，先用一个引用存起来，不然等下找不到
    console.log("没改变原型之前是相等的："+(SubType.prototype===SubPro))
    SubType.prototype = new SuperType(); //这里改变了SubType的原型使它指向一个SuperType实例
    console.log("给SubType构造函数换了原型之后是不等的："+(SubType.prototype===SubPro));
    //这里可以看出原型已经改变了
    SubType.prototype.getSubValue = function(){
        return this.subproperty;
    }
    var instance = new SubType();
    //****************************
    //下面开始证明图
    //****************************
    console.log("window对象下面添加了一个函数SuperType："+(window.hasOwnProperty('SuperType')));
    console.log("window对象下面添加了一个函数SubType："+(window.hasOwnProperty('SubType')));
    //下面全部为true
    console.log("1:"+(SuperType.prototype===SuperType.prototype));
    console.log("2:"+(SuperType===SuperType.prototype.constructor));
    //不能直接找到new SuperType，我们用5来获取
    console.log("3:"+(SubType.prototype.__proto__===SuperType.prototype));
    console.log("4:"+(SubType.prototype.constructor===SuperType));
    console.log("5:上面3，4已经顺带一起证明了，而且直接看代码就可以看出来了"); 
    //我们用SubPro暂存了原来的原型
    console.log("6:"+(SubPro.constructor===SubType));
    //还是因为取不到new SuperType,我们用SubType.prototype来获取
    console.log("7:"+(instance.__proto__===SubType.prototype));
    console.log("8:"+(instance.constructor===SuperType));
    //****************************
    //下面开始证明各自的属性位置
    //****************************
    console.log("instance有私有的subproperty属性："+(instance.hasOwnProperty('subproperty')));
    console.log("new SuperType有私有的property属性："+(SubType.prototype.hasOwnProperty('property')));
    console.log("SuperType.prototype拥有私有的getSuperValue属性："+(SuperType.prototype.hasOwnProperty('getSuperValue')));
    console.log("SubType.prototype（换过的原型）拥有私有的getSubValue属性："+(SubType.prototype.hasOwnProperty('getSubValue')));
    console.log("SubPro（原来的原型）拥有私有的getSubValue属性："+(SubPro.hasOwnProperty('getSubValue')));//false原来的原型没有getSubValue函数，因为是换了原型再添加的函数，所以函数存在实例里面
    </script>
</body>
</html>